layui.use(['table', 'layer'], function () {
    var $ = layui.jquery,
        echarts = layui.echarts;
    /**
     * 发送ajax请求，获得后端查询数据库中的数据
     * @type {HTMLElement}
     */
    $.ajax({
        type:"get",
        url:ctx+"/customer/customerBalanceAvg",
        dataType:"json",
        success:function (data){
            var chartDom = document.getElementById('balanceAvg');
            var myChart = echarts.init(chartDom);
            //var myChart=echarts.init(document.getElementById("make"));
            var option = {
                title: {
                  text: "客户账户余额平均值条形图"
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: data.data1,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: 'Direct',
                        type: 'bar',
                        barWidth: '60%',
                        data:data.data2,
                        itemStyle: {
                            //通常情况下：
                            normal: {
                                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                color: function (params) {
                                    var colorList = ['#65d186', '#f67287', '#f29e3c', '#c05bdd', '#7a65f2']; //每根柱子的颜色
                                    return colorList[params.dataIndex];
                                }
                            },
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }

    });




    $.ajax({
        type:"get",
        url:ctx+"/customer/customerProductAvg",
        dataType:"json",
        success:function (data){
            var chartDom = document.getElementById('productAvg');
            var myChart = echarts.init(chartDom);
            // option = {
            //     title: {
            //         text: 'Nightingale Chart',
            //         subtext: 'Fake Data',
            //         left: 'center'
            //     },
            //     tooltip: {
            //         trigger: 'item',
            //         formatter: '{a} <br/>{b} : {c} ({d}%)'
            //     },
            //     legend: {
            //         left: 'center',
            //         top: 'bottom',
            //         data:data.data1
            //     },
            //     toolbox: {
            //         show: true,
            //         feature: {
            //             mark: { show: true },
            //             dataView: { show: true, readOnly: false },
            //             restore: { show: true },
            //             saveAsImage: { show: true }
            //         }
            //     },
            //     series: [
            //         {
            //             name: 'Radius Mode',
            //             type: 'pie',
            //             radius: [20, 140],
            //             center: ['25%', '50%'],
            //             roseType: 'radius',
            //             itemStyle: {
            //                 borderRadius: 5
            //             },
            //             label: {
            //                 show: false
            //             },
            //             emphasis: {
            //                 label: {
            //                     show: true
            //                 }
            //             },
            //             data: data.data2
            //         },
            //         {
            //             name: 'Area Mode',
            //             type: 'pie',
            //             radius: [20, 140],
            //             center: ['75%', '50%'],
            //             roseType: 'area',
            //             itemStyle: {
            //                 borderRadius: 5
            //             },
            //             data: data.data2
            //         }
            //     ]
            // };
            var option = {
                title: {
                    text: "客户理财产品数量平均值条形图"
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: data.data1,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: 'Direct',
                        type: 'bar',
                        barWidth: '60%',
                        data: data.data2,
                        itemStyle: {
                            //通常情况下：
                            normal: {
                                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                color: function (params) {
                                    var colorList = ['#65d186', '#f67287', '#f29e3c', '#c05bdd', '#7a65f2']; //每根柱子的颜色
                                    return colorList[params.dataIndex];
                                }
                            },
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }

    });

    $.ajax({
        type:"get",
        url:ctx+"/customer/customersalaryAvg",
        dataType:"json",
        success:function (data){
            var chartDom = document.getElementById('salaryAvg');
            var myChart = echarts.init(chartDom);
            //var myChart=echarts.init(document.getElementById("make"));
            var option = {
                title: {
                    text: "客户薪水平均值条形图"
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: data.data1,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: 'Direct',
                        type: 'bar',
                        barWidth: '60%',
                        data: data.data2,
                        itemStyle: {
                            //通常情况下：
                            normal: {
                                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                color: function (params) {
                                    var colorList = ['#65d186', '#f67287', '#f29e3c', '#c05bdd', '#7a65f2']; //每根柱子的颜色
                                    return colorList[params.dataIndex];
                                }
                            },
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }

    });




    $.ajax({
        type:"get",
        url:ctx+"/customer/customersatisfactionAvg",
        dataType:"json",
        success:function (data){
            var chartDom = document.getElementById('satisfactionAvg');
            var myChart = echarts.init(chartDom);
            // option = {
            //     title: {
            //         text: 'Nightingale Chart',
            //         subtext: 'Fake Data',
            //         left: 'center'
            //     },
            //     tooltip: {
            //         trigger: 'item',
            //         formatter: '{a} <br/>{b} : {c} ({d}%)'
            //     },
            //     legend: {
            //         left: 'center',
            //         top: 'bottom',
            //         data:data.data1
            //     },
            //     toolbox: {
            //         show: true,
            //         feature: {
            //             mark: { show: true },
            //             dataView: { show: true, readOnly: false },
            //             restore: { show: true },
            //             saveAsImage: { show: true }
            //         }
            //     },
            //     series: [
            //         {
            //             name: 'Radius Mode',
            //             type: 'pie',
            //             radius: [20, 140],
            //             center: ['25%', '50%'],
            //             roseType: 'radius',
            //             itemStyle: {
            //                 borderRadius: 5
            //             },
            //             label: {
            //                 show: false
            //             },
            //             emphasis: {
            //                 label: {
            //                     show: true
            //                 }
            //             },
            //             data: data.data2
            //         },
            //         {
            //             name: 'Area Mode',
            //             type: 'pie',
            //             radius: [20, 140],
            //             center: ['75%', '50%'],
            //             roseType: 'area',
            //             itemStyle: {
            //                 borderRadius: 5
            //             },
            //             data: data.data2
            //         }
            //     ]
            // };
            var option = {
                title: {
                    text: "客户满意度平均值条形图"
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: data.data1,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: 'Direct',
                        type: 'bar',
                        barWidth: '60%',
                        data: data.data2,
                        itemStyle: {
                            //通常情况下：
                            normal: {
                                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                color: function (params) {
                                    var colorList = ['#65d186', '#f67287', '#f29e3c', '#c05bdd', '#7a65f2']; //每根柱子的颜色
                                    return colorList[params.dataIndex];
                                }
                            },
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }

    });




});